<template>
    <div>
      <!-- 数据报表 -->
      <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>数据管理</el-breadcrumb-item>
          <el-breadcrumb-item>数据列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 内容区 -->
        <el-card style='margin-top:20px'>
          <div id="main" style="width: 900px;height:400px;margin:20px auto;"></div>
        </el-card>
    </div>
</template>

<script>
import _ from 'lodash'
import * as echarts from 'echarts'
export default {
    data() {
        return {
          options: {
              title: {
                text: '用户来源'
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  label: {
                    backgroundColor: '#E9EEF3'
                  }
                }
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: [
                {
                  boundaryGap: false
                }
              ],
              yAxis: [
                {
                  type: 'value'
                }
              ]
            }
        };
    },
    created() {
    },
    async mounted() {
      var myChart = echarts.init(document.getElementById('main'));
      
      const {data:res} = await this.$http.get('reports/type/1')
        console.log(res);
        if(res.meta.status ==! 200 ) this.$message.error('获取报表数据失败')
        
        const newdata = _.merge(res.data,this.options)
        console.log(newdata);
      
      // 绘制图表
      myChart.setOption(newdata);
    },
    methods: {
    }
};
</script>

<style scoped>

</style>
